<template>
  <div class="theme-toggle">
    <el-dropdown @command="handleCommand" trigger="click">
      <el-button circle :icon="currentIcon" size="small" class="theme-button" />
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="light" :class="{ active: theme === 'light' }">
            <el-icon><Sunny /></el-icon>
            <span>浅色模式</span>
          </el-dropdown-item>
          <el-dropdown-item command="dark" :class="{ active: theme === 'dark' }">
            <el-icon><Moon /></el-icon>
            <span>深色模式</span>
          </el-dropdown-item>
          <el-dropdown-item command="auto" :class="{ active: theme === 'auto' }">
            <el-icon><Monitor /></el-icon>
            <span>跟随系统</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { Sunny, Moon, Monitor } from '@element-plus/icons-vue'
import { useThemeStore } from '../stores/theme'

const themeStore = useThemeStore()

// 当前主题
const theme = computed(() => themeStore.theme)

// 当前图标
const currentIcon = computed(() => {
  const iconMap = {
    light: Sunny,
    dark: Moon,
    auto: Monitor
  }
  return iconMap[theme.value]
})

// 处理主题切换
const handleCommand = (command: 'light' | 'dark' | 'auto') => {
  themeStore.setTheme(command)
}

onMounted(() => {
  themeStore.initTheme()
})
</script>

<style scoped>
.theme-toggle {
  display: inline-block;
}

.theme-button {
  border: 1px solid var(--el-border-color);
  transition: all 0.3s ease;
}

.theme-button:hover {
  border-color: var(--el-color-primary);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item.active) {
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

:deep(.el-dropdown-menu__item.active .el-icon) {
  color: var(--el-color-primary);
}
</style>